<!--
  Copyright [2025] [OBARA (Nanjing) Electromechanical Co., Ltd]

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->


{% extends 'base_en.html' %}

{% block title %}Login - OBARA Welding Gun Selection Database{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card fade-in-up">
            <div class="card-header text-center">
                <h2 class="mb-0">
                    <i class="bi bi-box-arrow-in-right me-2"></i>
                    User Login
                </h2>
                <p class="mb-0 mt-2 text-light">Develop with global automobile industry together</p>
            </div>
            <div class="card-body p-5">
                <div class="row">
                    <div class="col-md-6">
                        <form method="post" class="needs-validation" novalidate>
                            {% csrf_token %}
                            <div class="mb-4">
                                <label for="username" class="form-label">
                                    <i class="bi bi-person me-2"></i>
                                    Username
                                </label>
                                <input type="text" 
                                       class="form-control" 
                                       id="username" 
                                       name="username" 
                                       placeholder="Please enter username"
                                       required>
                                <div class="invalid-feedback">
                                    Please enter username
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <label for="password" class="form-label">
                                    <i class="bi bi-lock me-2"></i>
                                    Password
                                </label>
                                <input type="password" 
                                       class="form-control" 
                                       id="password" 
                                       name="password" 
                                       placeholder="Please enter password"
                                       required>
                                <div class="invalid-feedback">
                                    Please enter password
                                </div>
                            </div>
                            
                            <div class="mb-4 form-check">
                                <input type="checkbox" class="form-check-input" id="agreementCheck" required>
                                <label class="form-check-label" for="agreementCheck">
                                    I have read and agree to the <a href="/static/pdf/User Agreement.pdf" target="_blank">User Agreement</a> and <a href="/static/pdf/Privacy Policy.pdf" target="_blank">Privacy Policy</a> of OBARA Welding Gun Selection Database
                                </label>
                                <div class="invalid-feedback">
                                    Please check this box to agree to the User Agreement
                                </div>
                            </div>
                            
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary btn-lg" id="loginButton" disabled>
                                    <i class="bi bi-box-arrow-in-right me-2"></i>
                                    Login
                                </button>
                            </div>
                            
							<br>
							<br>
							<div class="alert alert-info">
								<strong>Security Policy Notice</strong>
								<span style="color: red;">
                                <p class="mb-2">
                                    1. The initially distributed account password is valid for 5 days by default, with a single batch download size of 200MB and a maximum of 100 files downloaded per day.
								</p>
								<p class="mb-2">
									2. If your account is restricted from login/download, please contact your sales manager for account renewal and download quota update.
                                </p>
								<p class="mb-0">
									3. Drawing and model data are technical secrets of our company. Logging in means you agree to the relevant security policies. The server will automatically monitor data access. For illegal data acquisition, we will take corresponding measures in accordance with the law to ensure data security.
                                </p>
								</span>
							</div>
                        </form>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="ps-md-4">
                            <h4 class="mb-3">
                                <i class="bi bi-question-circle me-2"></i>
                                How to Get Username
                            </h4>
                            <div class="alert alert-info">
                                <p class="mb-2">
                                    The Username and Password of OBARA Welding Gun Selection Database are uniformly 
                                    distributed by the Technical Development Department of OBARA (Nanjing) Mechanical 
                                    and Electrical Co., Ltd. The welding gun parameters, drawings and model data are 
                                    technical secrets of our company and are prohibited from being used for purposes 
                                    other than product selection.
                                </p>
                            </div>
                            
                            <h4 class="mb-3 mt-4">
                                <i class="bi bi-telephone me-2"></i>
                                Contact Us
                            </h4>
                            <div class="contact-info">
                                <p class="mb-2">
                                    <i class="bi bi-building me-2"></i>
                                    <strong>OBARA (Shanghai) Co., Ltd</strong>
                                    <br>
                                </p>
                                <p class="mb-2">
                                    <i class="bi bi-geo-alt me-2"></i>
                                    <strong>Address:</strong>
                                    <a href="https://j.map.baidu.com/d9/tj0k" 
                       target="_blank" class="text-decoration-none">
                        No. 17, Aidou Road, Pudong New Area, Shanghai, China
                    </a>
                                    <br>
                                </p>
                                <p class="mb-2">
                                    <i class="bi bi-telephone me-2"></i>
                                    <strong>Sales Department:</strong>(021)50461510
                                    <br>
                                </p>
                                <p class="mb-0">
                                    <i class="bi bi-envelope me-2"></i>
                                    <strong>Sales Dept Email:</strong>
                                    <a href="mailto:wujm@obara.com.cn" class="text-decoration-none">wujm@obara.com.cn</a>
                                    <br>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Form validation
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            var forms = document.getElementsByClassName('needs-validation');
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();

    // Enhanced login button enable/disable logic
    function validateForm() {
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('password').value.trim();
        const agreementCheck = document.getElementById('agreementCheck').checked;
        const loginButton = document.getElementById('loginButton');
        
        // Only enable login button when username, password are not empty and agreement is checked
        if (username && password && agreementCheck) {
            loginButton.disabled = false;
        } else {
            loginButton.disabled = true;
        }
    }

    // Listen to all relevant field changes
    document.getElementById('username').addEventListener('input', validateForm);
    document.getElementById('password').addEventListener('input', validateForm);
    document.getElementById('agreementCheck').addEventListener('change', validateForm);
    
    // Initialize validation state when page loads
    document.addEventListener('DOMContentLoaded', validateForm);
</script>
{% endblock %}

